<script setup>
import SelectPlant from './components/SelectPlant.vue'
import SelectMathine from './components/SelectMathine.vue'
import SelectCloth from './components/SelectCloth.vue'
import SelectWorkShop from './components/SelectWorkShop.vue'
import MyEchart from './components/MyEchart.vue'
import { changTime } from '@/utils/format.js'
import { getDefectData } from '../../api/clothrequest'
import { ref } from 'vue'
const params = ref({
  factoryId: '', //产房号
  checkStartDate: '', //搜索开始时间
  checkEndDate: '', //搜索结束时间
  deviceCode: '', //机台号
  id: '', //厂房
  clothCode: '' //布匹编号
})
const day = ref([])
const loading = ref(false)
import { useParms } from '@/stores'
import { useUserStore } from '@/stores'
// import { Loading } from '@element-plus/icons-vue/dist/types'
const userStore = useUserStore()
const useparms = useParms()
useparms.emptyParams()
const checkDate = ref()
const componentKey = ref(0)
const pieCharoptions = ref({
  title: {
    text: '疵点百分比',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 0, name: '线疵' },
        { value: 0, name: '烂针' },
        { value: 0, name: '漏针' },
        { value: 0, name: '不规则' },
        { value: 0, name: '纵向' },
        { value: 0, name: '孔洞' },
        { value: 0, name: '横向' },
        { value: 0, name: '掉布' },
        { value: 0, name: '双抽针' },
        { value: 0, name: '斑点' },
        { value: 0, name: '针路' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      label: {
        fontSize: 16,
        show: true,
        formatter: '{b}: {d}%'
      }
    }
  ]
})
const barCharOptions = ref({
  title: {
    text: '疵点数量',
    left: 'center'
  },
  xAxis: {
    data: [
      { value: '线疵' },
      { value: '烂针' },
      { value: '漏针' },
      { value: '不规则' },
      { value: '纵向' },
      { value: '孔洞' },
      { value: '横向' },
      { value: '掉布' },
      { value: '双抽针' },
      { value: '斑点' },
      { value: '针路' }
    ],
    axisLabel: {
      fontSize: 16 // 设置字体大小为16
    }
  },
  yAxis: {},

  series: [
    {
      name: '疵点',
      type: 'bar',
      data: [
        { value: 0, name: '线疵' },
        { value: 0, name: '烂针' },
        { value: 0, name: '漏针' },
        { value: 0, name: '不规则' },
        { value: 0, name: '纵向' },
        { value: 0, name: '孔洞' },
        { value: 0, name: '横向' },
        { value: 0, name: '掉布' },
        { value: 0, name: '双抽针' },
        { value: 0, name: '斑点' },
        { value: 0, name: '针路' }
      ],
      barWidth: '40%',
      label: {
        show: true, // 显示数值
        position: 'top', // 数值显示位置
        textStyle: {
          fontSize: 20 // 设置字体大小为16
        }
      },
      itemStyle: {
        color: '#4A90E2' // 设置柱状图的颜色为 '#4A90E2'
      },
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(220, 220, 220, 0.8)'
      }
    }
  ]
})
const defectData = ref([])
const onReset = () => {
  loading.value = false
  params.value.pageCurrent = 1 // 重置页面
  params.value.factoryId = ''
  params.value.id = ''
  params.value.deviceCode = ''
  params.value.clothCode = ''
  checkDate.value = ''
  params.value.checkStartDate = ''
  params.value.checkEndDate = ''
  useparms.emptyParams()
  for (let i = 0; i < 11; i++) {
    pieCharoptions.value.series[0].data[i].value = 0
    barCharOptions.value.series[0].data[i].value = 0
  }
  componentKey.value = componentKey.value + 1
}
const getdefectData = async () => {
  loading.value = true
  const res = await getDefectData(params.value)
  if (res.data.data === null) return onReset()
  defectData.value = res.data.data
  pieCharoptions.value.series[0].data[0].value = defectData.value.xianCi
  pieCharoptions.value.series[0].data[1].value = defectData.value.lanZhen
  pieCharoptions.value.series[0].data[2].value = defectData.value.louZhen
  pieCharoptions.value.series[0].data[3].value = defectData.value.buGuiZe
  pieCharoptions.value.series[0].data[4].value = defectData.value.zhongXiang
  pieCharoptions.value.series[0].data[5].value = defectData.value.kongDong
  pieCharoptions.value.series[0].data[6].value = defectData.value.hengXiang
  pieCharoptions.value.series[0].data[7].value = defectData.value.diaoBu
  pieCharoptions.value.series[0].data[8].value = defectData.value.shuangChouZhen
  pieCharoptions.value.series[0].data[9].value = defectData.value.banDian
  pieCharoptions.value.series[0].data[10].value = defectData.value.zhenLu

  barCharOptions.value.series[0].data[0].value = defectData.value.xianCi
  barCharOptions.value.series[0].data[1].value = defectData.value.lanZhen
  barCharOptions.value.series[0].data[2].value = defectData.value.louZhen
  barCharOptions.value.series[0].data[3].value = defectData.value.buGuiZe
  barCharOptions.value.series[0].data[4].value = defectData.value.zhongXiang
  barCharOptions.value.series[0].data[5].value = defectData.value.kongDong
  barCharOptions.value.series[0].data[6].value = defectData.value.hengXiang
  barCharOptions.value.series[0].data[7].value = defectData.value.diaoBu
  barCharOptions.value.series[0].data[8].value = defectData.value.shuangChouZhen
  barCharOptions.value.series[0].data[9].value = defectData.value.banDian
  barCharOptions.value.series[0].data[10].value = defectData.value.zhenLu
  componentKey.value = componentKey.value + 1
  loading.value = false
}
const changeTime = ($event) => {
  day.value = $event
  console.log($event[0])
  useparms.params.checkStartDate = changTime($event[0])
  useparms.params.checkEndDate = changTime($event[1])
  console.log(useParms.params)
}
const onSearch = () => {
  params.value.pageCurrent = 1 // 重置页面
  if (checkDate.value) {
    params.value.checkStartDate = changTime(checkDate.value[0])
  }
  if (checkDate.value) {
    params.value.checkEndDate = changTime(checkDate.value[1])
  }
  getdefectData()
}
// getdefectData()
</script>
<template>
  <page-container title="疵点统计" class="container">
    <el-form inline>
      <el-form-item v-if="userStore.user.roleId === 1" label="厂房编号:">
        <select-plant
          v-model="params.factoryId"
          placeholder="选择厂房编号"
        ></select-plant>
      </el-form-item>
      <el-form-item
        v-if="
          userStore.user.roleId === 1 ||
          userStore.user.roleId === 2 ||
          userStore.user.roleId === 3
        "
        label="车间号:"
      >
        <select-work-shop
          v-model="params.id"
          placeholder="选择车间编号"
          style="width: 100px"
        ></select-work-shop>
      </el-form-item>
      <el-form-item label="机台号:">
        <select-mathine
          v-model="params.deviceCode"
          placeholder="选择机台号"
          style="width: 150px"
        ></select-mathine>
      </el-form-item>

      <el-form-item label="布匹编号:">
        <select-cloth v-model="params.clothCode" style="width: 100px"></select-cloth>
      </el-form-item>
      <el-form-item label="时间:">
        <el-date-picker
          v-model="checkDate"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          type="datetimerange"
          placeholder="日期"
          size="default"
          @change="changeTime($event)"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="onSearch" class="select-button">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <my-echart
      v-loading="loading"
      :key="componentKey"
      :options="pieCharoptions"
      style="height: 500px"
    ></my-echart>
    <my-echart
      v-loading="loading"
      :key="componentKey"
      :options="barCharOptions"
      style="height: 500px"
    ></my-echart>
  </page-container>
</template>
<style lang="scss" scoped>
.container {
  border-radius: 20px;
  font-weight: bold;
  font-size: 17px;
}
.add-button {
  background-color: #077aee;
  font-weight: bold;
  color: #fff;
}
.select-button {
  background-color: #077aee;
  color: #fff;
}
</style>
